<script setup lang="ts">
import { ref } from 'vue';
import {message} from "ant-design-vue";
import AboutUser from "@/views/Student/component/Header/about-user.vue";
import AboutAccount from "@/views/Student/component/Header/about-account.vue";
import AboutSys from "@/views/Student/component/Header/about-sys.vue";

const open = ref<boolean>(false);
const loading = ref<boolean>(false);
const activeKey = ref<string>('1');
const showModal = () => {
  open.value = true;
};
const handleCancel = () => {
  open.value = false
  activeKey.value = '1';
}
const handleOk = () => {
  message.info("确认修改")
}
</script>

<template>
  <a-button size="small" type="link" @click="showModal"><slot/></a-button>
  <a-modal
      v-model:open="open"
      title="偏好设置"
      :width="560"
      @cancel="handleCancel"
      >
    <template #footer>
<!--      <a-button key="back" @click="handleCancel">取消编辑</a-button>-->
<!--      <a-button key="submit" type="primary" :loading="loading" @click="handleOk">确认修改</a-button>-->
    </template>
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="个人信息">
        <about-user></about-user>
      </a-tab-pane>
      <a-tab-pane key="2" tab="账号设置" force-render>
        <about-account></about-account>
      </a-tab-pane>
      <a-tab-pane key="3" tab="系统设置">
        <about-sys></about-sys>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<style scoped lang="scss">

</style>